<!--
 * @Author: 圆月豌豆 232957726@qq.com
 * @Date: 2025-11-27 09:48:39
 * @LastEditors: 圆月豌豆 232957726@qq.com
 * @LastEditTime: 2025-11-28 11:02:01
 * @FilePath: \3-dthree-edit - 副本\src\views\chart\ContentConfigurations\components\ChartEvent\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 事件配置 -->
  <n-collapse class="go-mt-3" arrow-placement="right" :default-expanded-names="['1', '2']">
    <n-text depth="3">
      组件 id：
      <n-text>{{ targetData.id }}</n-text>
    </n-text>
    <div class="flex items-center mt-[20px]">
      <div class="w-[100px]">转场目标:</div>
      <el-select v-model="targetData.events.transitionId" clearable placeholder="请选择转场目标" @change="changeEventType">
        <el-option
          v-for="item in state.list"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <!-- <n-select v-model:value="targetData.events.transitionId" clearable label-field="name" value-field="id" placeholder="请选择事件类型"  :options="state.list" /> -->
    </div>
    <!-- 转场事件 -->
    <!-- <chart-event-interaction></chart-event-interaction> -->
    <!-- <chart-event-base-handle></chart-event-base-handle> -->
    <!-- <chart-event-advanced-handle></chart-event-advanced-handle> -->
  </n-collapse>
</template>

<script setup lang="ts">
import { ref ,reactive,onMounted} from 'vue'
import { useRoute } from 'vue-router'
import { ChartEventInteraction } from './components/ChartEventInteraction'
import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
import { useTargetData } from '../hooks/useTargetData.hook'
import { modelGetPaged } from 'swagger-api/export-api/scada-config'

const { targetData } = useTargetData()
const showModal = ref(false)
const state = reactive({
  query: {
    PageIndex: 1,
    PageSize: 999,
  },
  list: [],
})
const route = useRoute()
const getData = async () => {
  try {
    const res = await modelGetPaged(state.query)
    const [f] = route.params.id
    f.includes('id_') 
    if (res.code == 0) {
      state.list = res.data.data?.filter((item) => item.status == 1 && (f.includes('id_')?true:item.id != f)) || []
    }
  } catch {}
}
const changeEventType = (e:any) => {
  if(!e) {
    targetData.value.events.transitionName = ''
    console.log(targetData,11)
    return
  }
  const item = state.list?.find((item:any) => item.id == e)
  targetData.value.events.transitionName = item?.name || ''
  console.log(targetData,22)
}
onMounted(() => {
  getData()
})
</script>
